<script lang="tsx">
/**
 * 空数据
 * @url 仿element组件库 https://element.eleme.cn/#/zh-CN/component/empty
 * v-slot="icon" 设置图标
 */
import EmptySvg from './empty.svg?component';

export default {
  name: 'REmpty',
  props: {
    /**
     * 文本描述
     */
    description: { type: String, default: '暂无数据' },
    /**
     * 大小
     */
    imageSize: { type: Number, default: 160 }
  },
  setup(props, ctx) {
    const { attrs, slots } = ctx;
    return () => (
      <div class='el-empty' props={attrs.value}>
        <div class='el-empty__image' style={{ width: `${props.imageSize}px` }}>
          {slots.icon?.() || h(EmptySvg)}
        </div>
        <div class='el-empty__description'>{props.description}</div>
      </div>
    );
  }
};
</script>
<style lang="scss" scoped>
.el-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  text-align: center;

  .el-empty__image {
    svg {
      width: 100%;
      height: 100%;
      vertical-align: top;
      fill: #dcdde0;
    }
  }

  .el-empty__description {
    margin-top: 20px;
    color: var(--td-text-color-secondary);
  }
}
</style>
